<template>
  <div style="margin-top:30px;">
    <el-form ref="form" :model="form"   label-width="90px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="登录账号" prop="phone" style="margin-right:15px">
              <el-input v-model="form.phone"   disabled/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
       <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="员工姓名" prop="name" style="margin-right:15px">
              <el-input v-model="form.name"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="登录密码" prop="upass" style="margin-right:15px">
              <el-input v-model="form.upass"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商授权" style="margin-right:15px">
              <el-select class="w100" v-model="form.authorizationShipmentCode" multiple filterable  placeholder="请选择">
                  <el-option
                    v-for="item in shipment"
                    :key="item.partyCode"
                    :label="item.userName"
                    :value="item.partyCode">
                  </el-option>
                </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库授权" style="margin-right:15px">
              <el-select class="w100" v-model="form.authorizationWarehouseCode" multiple filterable placeholder="请选择">
                  <el-option
                    v-for="item in warehouse"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit" :disabled="isDisable">确 定</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import request from '@/utils/request'

  Vue.use(VXETable)
  export default {
    name: 'PartyEdit',
    props: {
      phone:{
        type: String,
        required: true,
      }
    },
    data() {
      return {
        isDisable:false,
        props: { multiple: true },
        warehouse:[],
        shipment:[],
        emptyForm: {},
        form: {
          name: '',
          phone: '',
          groupCode: '',
          authorizationShipmentCode:[],
          authorizationWarehouseCode:[]
        }

      }
    },
    created() {
      this.getShipmentuList()
      this.getWarehouseList()
      this.getInfo(this.phone)
    },
    methods: {


    getShipmentuList() {
      request({ url: `/arpa-basic-api/users/shipments`, method: 'get'}).then(response => {
        this.shipment = response.data
      })
    },
    getWarehouseList() {
      request({ url: `/arpa-basic-api/users/warehouses`, method: 'get'}).then(response => {
        this.warehouse = response.data
      })
    },
      // 获取页面信息
      getInfo(phone) {
        // 查询到数据之前先展示空表单
        request({url: `/arpa-basic-api/users/${phone}`, method: 'get'}).then(response => {
          this.form = JSON.parse(JSON.stringify(response.data))
        })
      },


      // 提交
      funcSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.isDisable = true
            const data = this.form
            request({url: `/arpa-basic-api/users/${this.form.phone}`, method: 'put', data}).then(response => {
              this.$message({message: response.msg, type: 'success'})
              this.$emit('fatherEditMethod')
              this.isDisable = false
            }).catch(() => this.isDisable = false)
          } else {
            return false
          }
        })
      },
      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'edit')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
